<template>
    <div class="userInfo" v-if="user.id!=null">
        <div class="userPicture" >
            <el-image style="width: 60px; height: 60px; border-radius:46px" :src="user.headSculpture"></el-image>
            <span
                style="font-family: '微软雅黑';font-size: 14px;margin-top: 12px;width: 180px;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;text-align: center">{{
                    user.signature }}
                <el-divider></el-divider>
            </span>
            <!-- <div class="bt_onclick">
        <span style="border-right: 0;">关注</span>
        <span>粉丝</span>
    </div> -->
            <!-- 我的点赞 -->
            <div style="margin-top: 12px;display: flex;flex-direction: column;">
                <el-badge :value="likenum" class="item" type="primary">
                    <div class="my_thumbsup bt" style="border: 1px solid #9965;" @click="touserlikes()">
                        我的点赞
                    </div>
                </el-badge>

                <!-- 我的关注    -->
                <el-badge :value="focus" class="item" type="primary" >
                    <div class="my_attention bt" @click="touserfocus()">
                        我的关注
                    </div>
                </el-badge>

                <!-- 我的粉丝    -->
                <el-badge :value="fans" class="item" type="primary">
                    <div class="my_attention bt" @click="tomyfans()">
                        我的粉丝
                    </div>
                </el-badge>
            </div>

        </div>

    </div>


</template>

<script>
// 导入api
import API from "@/api/request";
export default {
    inject: ['reload'],
    data() {
        return {
            // 判断用户
            user: {},
            likenum: 0,
            focus: 0,
            fans: 0,
        }
    },
    methods: {
        getlikenum() {
            API.get("/api/plateManagement/likeNum", {
                params: {
                    userid: this.user.studentId
                }
            }).then(res => {
                if (res.data.code == 200) {
                    console.log(res)
                    this.likenum = res.data.data
                }
            })
        },
        getfocus() {
            API.get("/api/plateManagement/focusNum", {
                params: {
                    userid: this.user.studentId
                }
            }).then(res => {
                if (res.data.code == 200) {
                    console.log(res)
                    this.focus = res.data.data
                }
            })
        },
        getfans() {
            API.get("/api/plateManagement/fansNum", {
                params: {
                    userid: this.user.studentId
                }
            }).then(res => {
                if (res.data.code == 200) {
                    console.log(res)
                    this.fans = res.data.data
                }
            })
        },
        touserlikes(){
            this.$router.replace('/userlike');
        },
        touserfocus(){
            this.$router.replace('/userfocu');
        },
        tomyfans(){
            this.$router.replace('/myfans');
        }
        
    },
    created() {
        this.user = sessionStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')) : {}
        this.getlikenum();
        this.getfocus();
        this.getfans();
    },
}
</script>

<style scoped>
.userInfo {
    background-color: rgb(255, 253, 253);
    margin-top: 22px;
    padding: 30px;
    border: 1px solid #9965;
    border-radius: 12px;
    font-family: '微软雅黑';
    font-size: 14px;
    margin-left: 68px;
    width: 200px;
}

.userInfo>.userPicture {
    display: flex;
    flex-direction: column;
    /*设置主轴方向为水平，即横向水平*/
    align-items: center;
    /*设置侧轴子元素的排列方式为居中对齐*/
    white-space: nowrap;
    padding: 12px;
}

.userInfo>.userPicture>.bt_onclick {
    display: flex;
}

.userInfo>.userPicture>.bt_onclick>span {
    display: block;
    width: 120px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border: 1px solid #9965;
    cursor: pointer;
}

/* 按钮样式 */
.bt {
    width: 146px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    border: 1px solid #9965;
    border-top: 0;
    cursor: pointer;

}

>>>.el-badge>sup {
    position: absolute;
    top: 24px;
    right: 38px;
    transform: translateY(-50%) translateX(100%);
}

>>>.el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 8px 0;
}
</style>